<style>
    lable.error {
        color:red;
    }
</style>

<div class="page">
    <div class="logo"><a href="#"><img src="public/img/logo.png" class="img-responsive" /></a></div>
    <div class="dangky" id="dangky">
        <div class="frm">
            <form action="<?php echo site_url()?>user-info" method="post" name="form" id="form" autocomplete="off">
                <div class="dk">
                    <label>Họ tên:</label> 
                    <input class="txt" type="text" name="fname" id="fname" value="<?php echo (isset($post['fname'])) ? $post['fname'] : ''; ?>"/> 
                    <?php if(isset($error_msg['fname'])) echo "<label class='error'>".$error_msg['fname'].'</label>';?>
                    <br />
                </div>
                <div class="dk">
                    <label>Địa chỉ:</label> 
                    <input class="txt" type="text" name="address" value="<?php echo (isset($post['address'])) ? $post['address'] : ''; ?>"/> 
                    <?php if(isset($error_msg['address'])) echo "<label class='error'>".$error_msg['address'].'</label>';?>
                    <br />
                </div>
                <div class="dk">
                    <label>CMND:</label> 
                    <input class="txt" type="text" name="idcard" value="<?php echo (isset($post['idcard'])) ? $post['idcard'] : ''; ?>"/> 
                    <?php if(isset($error_msg['idcard'])) echo "<label class='error'>".$error_msg['idcard'].'</label>';?>
                    <br />
                </div>
                <div class="dk">
                    <label>Email:</label> 
                    <input class="txt" type="text" name="email" value="<?php echo (isset($post['email'])) ? $post['email'] : ''; ?>"/> 
                    <?php if(isset($error_msg['email'])) echo "<label class='error'>".$error_msg['email'].'</label>';?>
                    <br />
                </div>
                <div class="dk">
                    <label>Điện thoại:</label> 
                    <input class="txt" type="text" name="phone" value="<?php echo (isset($post['phone'])) ? $post['phone'] : ''; ?>"/> 
                    <?php if(isset($error_msg['phone'])) echo "<label class='error'>".$error_msg['phone'].'</label>';?>
                    <br />
                </div>
                <div class="clear"></div>
                <input class="gui" type="submit" name="submit" value="Gui" />
            </form>            
        </div>
    </div>
    <div id="success_popup" style="display:none">
		<div class="dangky10" id="dangky10">
			<div class="frm">
				<div class="button">
				<div class="share"><a href="<?php echo base_url()?>share"><img src="public/img/bt-share.png"/></a></div>
				<div class="hoantat"><a href="<?php echo base_url()?>complete"><img src="public/img/bt-hoantat.png"/></a></div>
				<div class="cl"></div>
				</div>
			</div>
		</div>    
	</div>



<script src="<?php echo site_url()?>public/js/jquery.form.js"></script>
<script src="<?php echo site_url()?>public/js/jquery.validate.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        // snow    
        var height = $( window ).height();
        $("#dangky").css("height",height-21);
        $.fn.snow();
        <?php
        if( (isset($_GET['status']) && $_GET['status']=="success" ) || isset($user_info) ) {
        ?>
        // show popup
        var html = $("#success_popup").html();
        $.fancybox( { content: html, wrapCSS:'fancybox-custom', closeBtn:false, hideOnOverlayClick:false, helper: { overlay:{ closeClick:false, locked:true } } });
        <?php        
        }
        ?>
        

        // validate
        $("#form").validate({
            rules: {
                fname: "required",
                address: "required",
                idcard: {
                        required: true,
                        maxlength: 12,
                        number: true
                },               
                email: {
                        required: true,
                        email: true
                },
                phone: {
                        required: true,
                        minlength: 8,
                        maxlength: 11
                }
            },
            messages: {
                    fname: "Vui lòng nhập họ tên",
                    address: "Vui lòng nhập địa chỉ",
                    idcard: {
                        required: "Vui lòng nhập cmnd hợp lệ",
                        minlength: jQuery.validator.format("Số chứng minh nhân dân là số có 9 ký tự số"),
                        maxlength: jQuery.validator.format("Số chứng minh nhân dân là số có 9 ký tự số"),
                    },
                    email: {
                            required: "Vui lòng nhập địa chỉ email",
                            email: jQuery.validator.format("Địa chỉ email không hợp lệ")
                    },
                    phone: {
                        required: "Vui lòng nhập số điện thoại",
                        minlength: jQuery.validator.format("Số điện thoại không hợp lệ"),
                        maxlength: jQuery.validator.format("Số điện thoại không hợp lệ")
                    }
            }
        });
    }); 
</script>    